<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>确认订单</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
          rel="stylesheet">
    <link href="../../assetsimages/x-icon/agricul.png" rel="shortcut icon" type="image/x-icon">
    <link href="../../assets/css/relys/animate.css" rel="stylesheet">
    <link href="../../assets/css/relys/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/all.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/icofont.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/lightcase.css" rel="stylesheet">
    <link href="../../assets/css/relys/swiper.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/style.css" rel="stylesheet">
    <style type="text/css">
        .cart-checkout-box button {
            padding: 11px 30px;
            border: 1px solid #f0f0f0;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 16px;
            border: none;
            background: #ffb11f;
            color: #fff;
            outline: none;
            border: none;
            font-weight: 700;
        }

        .product-add-to-cart {
            display: flex;
            flex-flow: column;
            align-items: flex-end;
        }

        .product-add-to-cart button {
            width: 130px;
            padding: 0 30px;
            line-height: 40px;
            background-color: #252525;
            text-align: center;
            border: 0;
            color: #fff;
        }

        .product-add-to-cart button:first-of-type {
            margin-bottom: 10px;
        }

        .product-add-to-cart button:last-of-type {
            margin-bottom: 0px;
        }

        .product-add-to-cart button:hover {
            background-color: #fe4847;
        }

        .product-name,
        .product-address {
            max-width: 125px;
        }

        .order-tab {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            background-color: #222;
        }

        .order-tab li {
            background-color: #222;
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            width: 100px;
            text-align: center;
            cursor: default;
        }

        .order-tab li:hover {
            color: #fe4847;
        }

        .order-tab li.active {
            color: #FE4847;
        }

        ul.order-tab li {
            list-style: none !important;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Page Header Section Start Here -->
    <section class="page-header bg_img padding-tb">
        <div class="overlay"></div>
        <div class="container">
            <div class="page-header-content-area">
                <h4 class="ph-title">确认订单</h4>
                <ul class="agri-ul">
                    <li><a href="index.html">首页</a></li>
                    <li><a class="active">确认订单</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- Page Header Section Ending Here -->


    <!-- Shop Cart Page Section start here -->
    <div class="shop-cart padding-tb">
        <div class="container">
            <div class="section-wrapper">
                <div class="cart-top">
                    <h4>订单列表</h4>
                    <ul class="order-tab">
                        <li :class="ordertype==item?'active':''" :key="i" @click="orderTypeTap(item)"
                            v-for="(item, i) in ordertypes">{{item}}
                        </li>
                    </ul>
                    <table>
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>收货地址</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, i) in list">
                            <td class="product-item" style="display: flex;">
                                <!-- <input type="checkbox" name="cart" style="margin-right: 10px;" /> -->
                                <div class="p-thumb">
                                    <img :src="item.picture" alt="product"
                                         style="width: 85px;height: 85px;object-fit: cover;">
                                </div>
                                <div class="p-content" style="width: auto;">
                                    <a href="#">{{item.goodname}}</a>
                                </div>
                            </td>
                            <td>￥{{item.price}}</td>
                            <td>
                                <div class="cart-plus-minus">
                                    <input :value="item.buynumber" class="cart-plus-minus-box"
                                           name="qtybutton" readonly="readonly" style="background-color: #f8f8f8;"
                                           type="text">
                                </div>
                            </td>
                            <td>￥{{item.total}}</td>
                            <td class="product-item" style="display: flex;">
                                <div class="p-content" style="width: auto;">
                                    <a href="#">{{item.address}}</a>
                                </div>
                            </td>
                            <td>{{item.status}}</td>
                            <td class="product-add-to-cart">
                                <button @click="onBuyTap(item)" v-if="item.status=='未支付'">立即支付</button>
                                <button @click="onCancelTap(item)" v-if="item.status=='未支付'">取消订单</button>
                                <button @click="onConfirmTap(item)" v-if="item.status=='已发货'">确认收货</button>
                                <button @click="onRefundTap(item)" v-if="item.status=='已支付'">退款</button>
                                <span v-if="item.status=='已完成'">/</span>
                                <span v-if="item.status=='已取消'">/</span>
                                <span v-if="item.status=='已退款'">/</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="paginations">
                    <ul class="agri-ul d-flex flex-wrap justify-content-center" id="paginator">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Shop Cart Page Section ending here -->
</div>
</body>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/fontawesome.min.js"></script>
<script src="../../assets/js/relys/waypoints.min.js"></script>
<script src="../../assets/js/relys/bootstrap.min.js"></script>
<script src="../../assets/js/relys/wow.min.js"></script>
<script src="../../assets/js/relys/swiper.min.js"></script>
<script src="../../assets/js/relys/jquery.countdown.min.js"></script>
<script src="../../assets/js/relys/jquery.counterup.min.js"></script>
<script src="../../assets/js/relys/isotope.pkgd.min.js"></script>
<script src="../../assets/js/relys/lightcase.js"></script>
<script src="../../assets/js/relys/functions.js"></script>
<script src="../../assets/js/relys/vue.js"></script>
<script src="../../assets/js/api/api.js"></script>
<!-- 工具类 -->
<script src="../../assets/js/relys/utils.js"></script>
<!-- 用户接口 -->
<script src="../../assets/js/api/defaultuser.js"></script>
<!-- 订单接口 -->
<script src="../../assets/js/api/order.js"></script>
<script src="../../assets/js/relys/jq-paginator.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            page: 1,
            limit: 6,
            total: 0,
            user: {},
            ordertype: '全部',
            ordertypes: ['全部'],
            usertable: ""
        },
        async created() {
            this.usertable = localStorage.getItem("sessionTable")
            session(`${this.usertable}`, (res) => {
                this.user = res.data
            });
            this.getOrderTypeTap()
            var data = await this.pageList();
            this.pageFun(data)
        },
        methods: {
            getOrderTypeTap() {
                var frontRoleMenus = JSON.parse(localStorage.getItem("frontRoleMenus"))
                var sessionRole = frontRoleMenus[`${this.usertable}`]
                if (typeof sessionRole == "object") {
                    sessionRole.forEach(item => {
                        if (item.menutable.split("dingdan") != -1 && item.menutable != "dingdan") {
                            var menuname = item.menuname.split("订单")[0]
                            if (menuname == "未支付") {
                                this.ordertypes.push("未支付")
                            } else if (menuname == "已支付") {
                                this.ordertypes.push("已支付")
                            } else if (menuname == "已完成") {
                                this.ordertypes.push("已完成")
                            } else if (menuname == "已取消") {
                                this.ordertypes.push("已取消")
                            } else if (menuname == "已退款") {
                                this.ordertypes.push("已退款")
                            } else if (menuname == "已发货") {
                                this.ordertypes.push("已发货")
                            }
                        }
                    })
                }
            },
            orderTypeTap(status) {
                this.ordertype = status
                this.page = 1
                this.pageList()
            },
            pageList() {
                return new Promise((resolve) => {
                    var _this = this;
                    ordersList(this.page, this.limit, this.ordertype, function (res) {
                        _this.list = res.data.list;
                        _this.total = res.data.total
                        resolve(res.data)
                    });
                })
            },
            pageFun(data) {
                var that = this
                $('#paginator').jqPaginator({
                    totalPages: data.totalPage,
                    visiblePages: 7,
                    currentPage: that.page,
                    prev: '<li class="d-none d-sm-block"><a href="javascript: pageFun()">&lt;</a></li>',
                    next: '<li class="d-none d-sm-block"><a href="javascript: pageFun()">&gt;</a></li>',
                    page: `<li class="d-none d-sm-block"><a href="javascript: pageFun()">{{page}}</a></li>`,
                    onPageChange: function (num, type) {
                        that.page = num
                    }
                });
            },
            onCancelTap(order) {
                var _this = this;
                var r = confirm("是否取消订单");
                if (r == true) {
                    order.status = '已取消';
                    // 设置订单状态为取消
                    ordersUpdate(order, function (res) {
                        _this.page = 1;
                        _this.pageList();
                        alert("订单已取消")
                    });
                }
            },
            onRefundTap(order) {
                var _this = this;
                var r = confirm("是否确认退款");
                if (r == true) {
                    order.status = '已退款';
                    ordersUpdate(order, function (res) {
                        _this.page = 1;
                        _this.pageList();
                        // 退回用户余额
                        _this.user.money = _this.user.money + order.total;
                        updateUser(`${_this.usertable}`, _this.user, (result) => {
                            if (result && result.code == 0) {
                                alert("退款成功")
                            }
                        });
                    });
                }
            },
            onConfirmTap(order) {
                var _this = this;
                var r = confirm("是否确认收货");
                if (r == true) {
                    order.status = '已完成';
                    // 设置订单状态为取消
                    ordersUpdate(order, function (res) {
                        if (res && res.code == 0) {
                            _this.page = 1;
                            _this.pageList();
                            alert("确认收货成功")
                        }
                    });
                }
            },
            onBuyTap(order) {
                var _this = this;
                var r = confirm("是否支付此订单");
                if (r == true) {
                    if (_this.user.money < order.total) {
                        alert('账户余额不足')

                    } else {
                        order.status = '已支付';
                        ordersUpdate(order, function (res) {
                            _this.page -= 1;
                            _this.pageList();
                            _this.user.money = _this.user.money - order.total;
                            updateUser(`${_this.usertable}`, _this.user, (result) => {
                                if (result && result.code == 0) {
                                    alert("订单支付成功")
                                }
                            });
                        });
                    }
                }
            }
        }
    })

    function pageFun() {
        app.pageList()
    }
</script>
</html>
